<template>
  <div style="display: flex;align-items: center;margin-right: 15px;margin-left: 15px;">
    <a style="color: #515a6e;" href="javascript:void(0)" @click="sort('')"><span v-text="sortLabel" ></span></a>
    <div style="display: flex;flex-direction: column;">
    <span  :class="['sort_asc',currentSort=='asc'?'current_asc':'']" @click="sort('asc')"></span>
    <span :class="['sort_desc',currentSort=='desc'?'current_desc':'']"  @click="sort('desc')" ></span>
    </div>
  </div>
</template>

<script>

export default {
  name: "ListSort",
  data(){
    return {
    currentSort:''
  }
  },
  props:{
    sortLabel:{
      type:String,
      default:""
    },
    sortValue:{
      type:String,
      default:""
    },
    sortBy:{
      type:String,
      default:""
    },
  },
  computed:{

  },
  methods:{
    sort(sortBy){
      if(sortBy==''){
        sortBy = this.sortBy.endsWith('desc')?'asc':'desc'
      }
      this.$emit("change",this.sortValue+" "+sortBy);
    }
  },
  watch: {
    sortBy: {
      immediate: true,
      handler(val) {
        if (this.sortBy != '' && this.sortBy.startsWith(this.sortValue)) {
          if (this.sortBy.endsWith('desc')) {
            this.currentSort = 'desc'
          } else {
            this.currentSort = 'asc'
          }
        } else {
          this.currentSort = '';
        }
      }
    }
  },
  mounted() {


  }
}
</script>

<style scoped lang="less">

@current_color:#333;
@sort_color:#a09d9d;
@sort_size:5px;
.sort_desc{

  width: 0;
  height: 0;
  border-top: @sort_size solid @sort_color;
  border-left: @sort_size solid transparent;
  border-right: @sort_size solid transparent;


}
.sort_asc{
  width: 0;
  height: 0;
  border-bottom: @sort_size solid @sort_color;
  border-left: @sort_size solid transparent;
  border-right: @sort_size solid transparent;
  margin-bottom: 2px;

}
.current_asc{
  border-bottom: @sort_size solid @current_color !important;

}
.current_desc{
  border-top: @sort_size solid @current_color !important;
}
</style>
